<template>
    <div class="mySelf">
        <div   v-show="topshow" class="Top_top">
            <div class="headimg">
                <ul>
                      <i @click="back" style="margin-top:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
                    <li @click="LookbigHeadimg()" style="width:35%">
                    <img class="wrapperheadimg" @click="onClickShow" style="width:100%;height:100%;border-radius:50%" src="" alt="头像"> 
                    <van-overlay :show="show" @click="onClickHide">
                        <div class="wrapper">
                                <img class="wrapperheadimg" style="width:100px;height:80px;border-radius:50%" src="" alt="头像"> 
                        </div>
                    </van-overlay>
                    
                    </li>
                    <li style="width:55%">
                        <span class="nickname" style="color:white"></span>
                    </li>
                </ul>
            </div>
            <div class="editmessage">
                <button id="ifgz" @click="ifgogz()" style="    margin-top: 50%;">
                    
                </button>

            </div> 
        </div>
        <div   v-show="centershow" class="Center">

                            <div class="Top_text">
                    <ul>
                        <li>
                            <p class="text_top">动态</p>
                            <p class="text_bottom"></p>
                        </li>
                        <li @click="lookattentionlist()">
                            <p class="text_top">关注</p>
                            <p class="text_bottom"></p>
                        </li>
                        <li  @click="lookfanslist()"> 
                            <p class="text_top">粉丝</p>
                            <p class="text_bottom"></p>
                        </li>
                        <li>
                            <p class="text_top">点赞</p>
                            <p class="text_bottom"></p>
                        </li>
                    </ul>
                </div>
            <div class="contain">
                <div class="contain_text">
                    <ul> 
                        <li v-for="(textli,index) in textlist" :key="index">
                            {{textli.title}}
                            <div  class="textifshow"></div>
                        </li>
                    </ul>
                </div>
                <div class="contain_contain">
                    <div class="post" v-for="(likeli,index) in likelist" :key="index">
                        <div class="top">
                            <a href="">
                                <van-image 
                                    width="1rem" 
                                    height="1rem" 
                                    radius="100%" 
                                    fit="cover" 
                                    :src="require('../../assets/img/1.jpg')" 
                                />
                                <p>
                                    {{likeli.nickname}}
                                </p>
                                <p class="bodyId">
                                    {{likeli.bodyId}}
                                </p>
                            </a>
                            <van-popover style=" margin-right: 0rem;"
                            v-model="showPopover"
                            trigger="click"
                            placement="bottom-end"
                            >   
                            <div class="list">
                                <ul>
                                    <li @click="deletelikelis(index)">删除发布</li>
                                </ul>
                            </div>
                            <template #reference>
                                <van-button style="width: 1rem;height: 0.8rem;margin-right: 0rem;border:none">
                                    <i style="margin-right: 0rem;" class="iconfont icon-gengduo"></i>
                                </van-button>
                            </template>
                            </van-popover>
                        </div>
                        <div class="font">
                            {{likeli.content}}
                        </div>
                        <div class="pic">
                            <van-image 
                                width="3rem"
                                height="3rem"
                                fit="cover" 
                                :src="require('../../assets/img/1.jpg')" 
                            />
                            <van-image 
                                width="3rem"
                                height="3rem"
                                fit="cover" 
                                :src="require('../../assets/img/1.jpg')" 
                            />
                            <van-image 
                                width="3rem"
                                height="3rem"
                                fit="cover" 
                                :src="require('../../assets/img/1.jpg')" 
                            />
                        </div>
                        <div class="bottom">
                            <Like></Like>
                            <Talk></Talk>
                            <Love></Love>
                        </div>
                    </div>

                </div>
            </div>


            <button @click="chat($route.params.id)" style="background-color: rgb(250, 182, 179);color: white;width: 100%;border: none;    height: 1rem;margin-top: 6%;border-radius:5%;">
                聊天
            </button>







        </div>

        <router-view/>

    <p id="userid" style="display:none"></p>

    </div>
    
</template>

<script>


import  {mapState} from 'vuex'

import Theme from '../common/Theme.vue'
import Search from '../common/Search.vue'
import MyFoot from '../common/MyFoot.vue'
import Report from '../common/post/Report.vue'
import Talk from '../common/post/Talk.vue'
import Like from '../common/post/Like.vue'
import Love from '../common/post/Love.vue'
import axios from 'axios'


import jwtDecode from 'jwt-decode'



export default {
    name:'Themself',
    components:{
        Theme,Search,MyFoot,Talk,Like,Love,Report
    },
    data(){
        return{
            
            textifshow:true,
            show: false,
            textshow:true,
            texthide:false,
            centershow:true,
            topshow:true,
            footshow:true,
            search:false,
            textlist:[
                {title:"动态"},
            ],
            decode:null
        }
    },
    methods:{
        back(){
            history.go(-1)
        },
        //是否关注
        ifgogz(){
            console.log("11111111111111")
            var ifgz = document.getElementById("ifgz");
            var ifgztext = ifgz.innerHTML;
            console.log(ifgztext)
            if(ifgztext=="关注"){

                //调用关注的接口
            axios({
                url:'/follow/addFollow',
                method:'POST',
                params:{
                    userId:25,
                    useredId :28
                }
            }).then(data => {
                console.log("成功关注")
                var ifgz = document.getElementById("ifgz");
                ifgz.innerHTML="取消关注"
            }).catch(err => {
                console.log(err)
            })

            }else{
                //调用取消关注的接口
            axios({
                url:'/follow/deleteFollow',
                method:'DELETE',
                params:{
                    userId:28,
                    useredId :29
                }
            }).then(data => {
                console.log("成功取消关注")
                var ifgz = document.getElementById("ifgz");
                ifgz.innerHTML="关注"
            }).catch(err => {
                console.log(err)
            })

            }
        },
        //获取个人信息
        LookbigHeadimg(){
            console.log("查看头像大图")

        },
        //查看头像
        onClickShow() {
        this.show=true;
        },
        onClickHide() {
        this.show=false;
        },
        chat(userId){
            const linkId = null
            //userId是对方的id
            //检查两个人是不是第一次聊天，返回一下linkid
            let that = this
            async function test(){
                let first = await axios({
                    url:'/chat/isFirstChat',
                    method:"get", 
                    headers: {
                        "Authentication-Token": sessionStorage.getItem("token")
                    },
                    params:{
                        fromUser:that.decode.userId,
                        toUser:userId
                    }
                })
                if(first.data.code === 20000){
                    linkId = first.data.linkId
                    axios({

                    })
                    this.$router.push({
                        path:`/chat-page/${userId}`,
                        query:{
                            nickname:first.toUserNickname,
                            linkId:linkId
                        }
                    })
                }
            }
            test()
            
        }
    },
    mounted(){
        //从网址获取用户id进行遍历用户信息!!!!!
        var test = window.location.href;
        var id = test.substr(test.lastIndexOf("/") + 1,2);  //截取最后一个点号后4个字符
        console.log(id)

        if(sessionStorage.length==0){
            console.log("尚未登录")
            this.$router.push("/dynamic/recommend")
        }else{
            //此处进行判断是否展示个人信息页面
            let token=sessionStorage.getItem("token")
            console.log(token)
            //解析token 
            const decode =  jwtDecode(token);
            console.log(decode);
            this.decode = decode
            //赋值用户id
            var userid  = document.getElementById("userid");
            userid.innerHTML=decode.userId;
            console.log(userid.innerHTML)
            console.log(id)
            console.log(decode)
            //赋值用户昵称
            var nickname  = document.getElementsByClassName("nickname")[0];
            nickname.innerHTML=decode.nickname;
            //赋值用户粉丝数
            var text_bottomtwo = document.getElementsByClassName("text_bottom")[2];
            text_bottomtwo.innerHTML=decode.fans
            //赋值用户关注数
            var text_bottomone = document.getElementsByClassName("text_bottom")[1];
            text_bottomone.innerHTML=decode.followee
            //赋值用户头像
            var wrapperheadimg  = document.getElementsByClassName("wrapperheadimg")[0];
            var wrapperheadimgbig  = document.getElementsByClassName("wrapperheadimg")[1];
            wrapperheadimg.src=decode.img
            wrapperheadimgbig.src=decode.img
            //进入该页面首先提示是否关注
            axios({
                url:`follow/judgeFollow?userId=${userid.innerHTML}&useredId=${id}`,
                method:'GET',
                data:{
                    // userId:25,
                    // useredId:28
                },
               headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
            })
            .then(data => {
                console.log("1111111111111111")
                console.log(data.data.data)
                if(data.data.data=="您未关注此用户"){
                    var ifgz = document.getElementById("ifgz");
                    ifgz.innerHTML="关注"
                }else{
                    var ifgz = document.getElementById("ifgz");
                    ifgz.innerHTML="取消关注"
                }

            })
            .catch(err => {
                console.log(err)
            })
            //进入该页面进行遍历该用户的 动态 点赞数量

                        //此处展示作者点赞的个数  
            axios({
                url:'/like/likeCount',
                method:'get',
                params:{
                    userId:id
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                console.log(data)
                var text_bottomthree  = document.getElementsByClassName("text_bottom")[3];
                text_bottomthree.innerHTML=data.data.data
            }).catch(err => {
                console.log(err)
            })
            //此处展示作者动态个数
            axios({
                url:`/usersPosts/postsCounts?userId=${id}`,
                method:'get',
                     headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
            }).then(data => {
                var text_bottomzero = document.getElementsByClassName("text_bottom")[0];
                console.log(data)
                text_bottomzero.innerHTML=data.data.data.data
            }).catch(err => {
                console.log(err)
            })



        //遍历用户动态列表
        axios({
            url:`/usersPosts/queryAllPosts?state=1&id=${id}`,
            method:'get',
        }).then(data => {
            //遍历所有动态列表
            if(data.data.code==20000){
                console.log("111111")
                console.log(data.data.data)
                this.likelist=data.data.data

            }else{
                console.log(data.data.data)
                console.log("77777777777777777777777")
            }
        }).catch(err => {
            console.log(err)
        })


        }


    }

}
</script>

<style lang="less" scoped>



.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
    width: 20%;
    height: 20%;
    margin-left: 20%;
    margin-right: 20%;
  background-color: #fff;
}



    .mySelf{


        font-size: 0.5rem;
        display: flex;
        flex-direction: column;
        .Top_top{
            background-image: url("../../assets/img/personpiture.png");
            background-size: cover;
            width:100%;
            height:4rem;
            display: flex;
            div{
                flex:1;
            }
            .editmessage{
                button{
                    float: right;
                    color: black;
                    margin-right: 10%;
                    padding: 0.1rem;
                    border-radius: 0.1rem;
                    border: 1px solid transparent;
                    width: 45%;
                    margin-top: 25%;
                    font-size:0.2rem;
                }
                
            }
            .headimg{
                ul{
                    height: 100%;
                    width: 100%;
                    list-style: none;
                    li{
                        margin-top: 20%;
                        height: 45%;
                        float: left;
                        padding-left: 5%;
                    }
                    }
                }
        }
        .Center{
            background-color: rgb(245 245 247);
            .Top_text{
                margin-top: 5%;
                color: gray;
                ul{
                    height: 100%;
                    width: 100%;
                    list-style: none;
                    display: flex;
                    li{
                        float: left;
                        flex: 1;
                        font-size: 0.4rem;
                        text-align: center;
                        padding: 0.1rem;
                        .text_top{
                            color:gray;
                        }
                        .text_bottom{
                            color:black;
                        }
                    }
                }
            }
            .Tools{
                .Tools_top{
                    font-size: 0.6rem;
                    border-bottom: 1px solid rgb(245 245 247);
                    padding: 0.2rem;
                }
                margin-top: 5%;
                height: 5rem;
                border-radius: 0.6rem;
                background-color:white;
                ul{
                    width: 100%;
                    height: 80%;
                    list-style: none;
                    top: 6%;
                    position: relative;
                    li{
                        float: left;
                        width: 50%;
                        text-align: center;
                        height: 50%;
                        .icon{
                            margin-left: 45%;
                            font-size: 50px;
                        }
                        p{
                            font-size: 0.2rem;
                            height: 35%;
                            width: 100%;
                        }
                    }
                }
            }
        }
        .contain{
            border-radius: 0.6rem;
            background-color: white;
            overflow-y: scroll;
            height: 15.4rem;
            // margin-top: 3%;
            .contain_text{
                padding: 0.2rem;
                ul{
                    width: 100%;
                    list-style: none;
                    display: flex; 
                    li{
                        text-align: center;
                        float: left;
                        flex: 1;
                    }
                }


            }
            .contain_contain{
                height: 88%;
            }
        }


    }


    .post{
        background-color: white;
        padding: 0.25rem;
        margin-bottom: 0.3rem;
        overflow: auto;
        .top{
            display: inline-flex;
            justify-content: space-between;
            flex-direction: row;
            padding-bottom: 0.2rem;
            width: 100%;
            a{
                display: inline-flex;
                align-items: center;
                color: #4b4b4b;
                font-size: 0.4rem;
                p{
                    margin-left: 0.1rem;
                }
            }
            
        }
        .font{
            margin-bottom: 0.2rem;
            font-size: @fontSmall;
        }
        .pic{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            
            .van-image{
                margin-right: 0.15rem;
                margin-bottom: 0.2rem;
            }
            
        }
        .bottom{
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-evenly;
        }
    }



    .textifshow{
        height: 0.02rem;
        width: 100%;
        background-color: rgb(245 245 247);
        // margin-left: 20%;
        margin-top: 0.1rem;
    }
    
</style>